<template>
  <h1>Hello Vue3 - options 选项API</h1>
  <h2>当前鼠标位置</h2>
  <p>x: {{ x }}</p>
  <p>y: {{ y }}</p>
  <h3>当前点击次数：{{ count }}</h3>
  <button @click="add">点击</button>
</template>

<script>
// 选项式 API，Vue3 中依旧支持
export default {
  data() {
    return {
      x: 0,
      y: 0,
      count: 0,
    }
  },
  methods: {
    handleMouse(e) {
      this.x = e.clientX
      this.y = e.clientY
    },
    add() {
      this.count++
    },
  },
  mounted() {
    document.addEventListener('mousemove', this.handleMouse)
  },
  unmounted() {
    document.removeEventListener('mousemove', this.handleMouse)
  },
}
</script>
